<script lang="ts" setup>
// FluentUI components are registered in main.ts
import type {
  TreeItemAppearance,
  TreeItemSize,
} from '@fluentui/web-components';

withDefaults(
  defineProps<{
    /**
     * The appearance variants of the tree item element
     */
    appearance?: TreeItemAppearance;
    /**
     * The indent of the tree item element
     */
    dataIndent?: number;
    /**
     * When true, the control has no child tree items
     */
    empty?: boolean;
    /**
     * When true, the control will appear expanded by user interaction
     */
    expanded?: boolean;
    /**
     * When true, the control will appear selected by user interaction
     */
    selected?: boolean;
    /**
     * The size of the tree item element
     */
    size?: TreeItemSize;
  }>(),
  {
    appearance: 'subtle',
    expanded: false,
    selected: false,
    empty: false,
    size: 'small',
    dataIndent: undefined,
  },
);

const emit = defineEmits<{
  change: [event: Event];
  click: [event: MouseEvent];
  toggle: [event: CustomEvent];
}>();

const handleChange = (event: Event) => {
  emit('change', event);
};

const handleToggle = (event: CustomEvent) => {
  emit('toggle', event);
};

const handleClick = (event: MouseEvent) => {
  emit('click', event);
};
</script>

<template>
  <fluent-tree-item
    :appearance="appearance"
    :expanded="expanded"
    :selected="selected"
    :empty="empty"
    :size="size"
    :data-indent="dataIndent"
    @change="handleChange"
    @toggle="handleToggle"
    @click="handleClick"
  >
    <slot></slot>
  </fluent-tree-item>
</template>

<style scoped></style>
